<template>
    <div class="menu-management-container">
        <div class="menu-management-menu-left">
            <div class="menu-management-menu-list">
                <div class="menu-management-menu-list-title">
                    <div style="width: 100%; margin-left: 76px;">菜单树</div>
                    <div style="margin-right: 20px;"> <el-button type="primary" @click="switchToAddForm()">新增菜单</el-button>
                    </div>
                </div>
                <div style="display: flex; width: 100%; background-color: #fafafa; font-weight: 700; margin-bottom: 15px;">
                    <div style="width: 30%; text-align: center;">
                        菜单编号
                    </div>
                    <div style="width: 45%; text-align: center;">菜单名称（备注）</div>
                    <div style="text-align: left;">操作</div>
                </div>
                <div style="height: 500px;overflow: auto;">
                    <template v-for="item in BusinessMenuData">
                        <div v-if="item.fatherBusinessId == 0" :key="item.businessId"
                            class="menu-management-menu-list-item">
                            <div style="width: 30%;text-align: center;">{{ item.businessId }}</div>
                            <div style="display: flex;width: 45%;">
                                <div>{{ item.businessName }}</div>
                                <div>（{{ item.businessNotes }}）</div>
                            </div>

                            <div style="display: flex;margin-right: 20px;">
                                <el-button size="small" @click="SwitchToUpdateForm(item)">查看并编辑</el-button>
                                <el-button type="danger" @click="deleteThisMenu(item.businessId)"
                                    size="small">删除</el-button>
                            </div>
                        </div>
                        <template v-for="sonItem in BusinessMenuData">
                            <div v-if="sonItem.fatherBusinessId == item.businessId"
                                :key="sonItem.businessId + item.businessName" class="menu-management-menu-list-sonItem">
                                <div style="width: 30%; text-align: center;">{{ sonItem.businessId }}</div>
                                <div style="display: flex;width: 45%;">
                                    <div style="margin-left: 30px;">{{ sonItem.businessName }}</div>
                                    <div>（{{ sonItem.businessNotes }}）</div>
                                </div>
                                <div style="display: flex; margin-right: 20px;">
                                    <el-button size="small" @click="SwitchToUpdateForm(sonItem)">查看并编辑</el-button>
                                    <el-button type="danger" @click="deleteThisMenu(sonItem.businessId)"
                                        size="small">删除</el-button>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>

            </div>
        </div>
        <div class="menu-management-menu-right">
            <div v-show="showAddMenuForm">
                <div style="margin-top: 15%; font-size: 25px;">新增菜单</div>
                <el-form :model="BusinessDataForm" :rules="rulesOfAdd" ref="BusinessDataForm" label-width="100px"
                    class="demo-ruleForm" style="margin-top: 10%;">
                    <el-form-item label="菜单名称" prop="businessName">
                        <el-input v-model="BusinessDataForm.businessName"></el-input>
                    </el-form-item>
                    <el-form-item label="父菜单编号" prop="fatherBusinessId">
                        <el-input v-model.number="BusinessDataForm.fatherBusinessId"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单路由" prop="businessRouter">
                        <el-input v-model="BusinessDataForm.businessRouter"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单备注" prop="businessNotes">
                        <el-input v-model="BusinessDataForm.businessNotes"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单优先级" prop="businessOrder">
                        <el-input v-model.number="BusinessDataForm.businessOrder"></el-input>
                    </el-form-item>
                    <div style="position: relative;right: 0;text-align: right;margin-top: 5%;">
                        <el-button @click="submitAddMenu('BusinessDataForm')" type="primary">确认提交</el-button>
                    </div>
                </el-form>
            </div>

            <div v-show="showDetailedMenuForm">
                <div style="margin-top: 15%; font-size: 25px;">查看并编辑菜单</div>
                <el-form :model="businessMenuUpdate" :rules="rulesOfUpdate" ref="businessMenuUpdate" label-width="100px"
                    class="demo-ruleForm" style="margin-top: 10%;">
                    <el-form-item label="菜单编号" prop="businessId">
                        <el-input v-model="businessMenuUpdate.businessId" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="businessName">
                        <el-input v-model="businessMenuUpdate.businessName"></el-input>
                    </el-form-item>
                    <el-form-item label="父菜单编号" prop="fatherBusinessId">
                        <el-input v-model.number="businessMenuUpdate.fatherBusinessId"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单路由" prop="businessRouter">
                        <el-input v-model="businessMenuUpdate.businessRouter"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单备注" prop="businessNotes">
                        <el-input v-model="businessMenuUpdate.businessNotes"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单优先级" prop="businessOrder">
                        <el-input v-model.number="businessMenuUpdate.businessOrder"></el-input>
                    </el-form-item>
                    <div style="position: relative;right: 0;text-align: right;margin-top: 5%;">
                        <el-button @click="submitUpdateMenu('businessMenuUpdate')" type="primary">确认提交</el-button>
                    </div>
                </el-form>
            </div>

        </div>
    </div>
</template>
<style scoped>
.menu-management-container {
    width: 95%;
    height: 97%;
    margin: 0 auto;
    margin-top: 1%;
    background-color: #fff;
    display: flex;
}

.menu-management-menu-left {
    width: 50%;
    height: 100%;
    background-color: #fff;
    border-right: #e8edf7 30px solid;
}

.menu-management-menu-list {
    width: 100%;
    /* height: 100%; */
    margin: 0 auto;
    font-size: 14px;

}

.menu-management-menu-list-title {
    width: 100%;
    background-color: #fafafa;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    position: relative;
}

.menu-management-menu-list-item {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    display: flex;
    background-color: #fafafa;
    /* justify-content: space-between; */
    border-bottom: 1px solid #ebeef5;
}

.menu-management-menu-list-item:hover {
    background-color: #f5f7fa;
    /* color: #fff; */
}

.menu-management-menu-list-sonItem {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
    display: flex;
    background-color: #fff;
    /* justify-content: space-between; */
    border-bottom: 1px solid #ebeef5;
}

.menu-management-menu-list-sonItem:hover {
    background-color: #f5f7fa;
    /* color: #fff; */
    /* cursor: pointer; */
}

.menu-management-menu-right {
    width: 40%;
    height: 100%;
    margin: 0 auto;
    position: relative;

}
</style>
<script>
import { getBusinessMenu, addBusinessMenu, updateBusinessMenu, deleteBusinessMenu } from "../../api/businessMenu"
export default {
    name: 'MenuView',
    data() {
        return {
            BusinessMenuData: [],
            BusinessDataForm: {
                businessName: null,
                fatherBusinessId: null,
                businessRouter: null,
                businessNotes: null,
                businessOrder: null,
            },
            businessMenuUpdate: {
                businessId: null,
                businessName: null,
                fatherBusinessId: null,
                businessRouter: null,
                businessNotes: null,
                businessOrder: null
            },
            showAddMenuForm: false,
            showDetailedMenuForm: false,
            rulesOfAdd: {
                businessName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                fatherBusinessId: [
                    { required: true, message: '请输入父菜单编号', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
                businessRouter: [
                    { required: false },
                ],
                businessNotes: [
                    // { required: true, message: '请输入备注', trigger: 'blur' },
                    { required: false },
                ],
                businessOrder: [
                    { required: true, message: '请输入菜单优先级顺序', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
            },
            rulesOfUpdate: {
                businessId: [
                    { required: true }
                ],
                businessName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                fatherBusinessId: [
                    { required: true, message: '请输入父菜单编号', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
                businessRouter: [
                    { required: false },
                ],
                businessNotes: [
                    // { required: true, message: '请输入备注', trigger: 'blur' },
                    { required: false },
                ],
                businessOrder: [
                    { required: true, message: '请输入菜单优先级顺序', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        submitAddMenu(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('此操作将新增该菜单, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        addBusinessMenu(this.BusinessDataForm).then(res => {
                            if (res.data.code == '0') {
                                this.$message({
                                    message: '新增成功',
                                    duration: 2000,
                                    showClose: true,
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    location.reload();
                                }, 1000)
                            }
                            else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                else {
                    return false;
                }
            })
        },
        switchToAddForm() {
            this.showAddMenuForm = true;
            this.showDetailedMenuForm = false;
        },
        SwitchToUpdateForm(item) {
            this.showAddMenuForm = false;
            this.showDetailedMenuForm = true;

            this.businessMenuUpdate.businessId = item.businessId;
            this.businessMenuUpdate.businessName = item.businessName;
            this.businessMenuUpdate.fatherBusinessId = item.fatherBusinessId;
            this.businessMenuUpdate.businessRouter = item.businessRouter;
            this.businessMenuUpdate.businessNotes = item.businessNotes;
            this.businessMenuUpdate.businessOrder = item.businessOrder;
        },
        submitUpdateMenu(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('此操作将修改此菜单信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        updateBusinessMenu(this.businessMenuUpdate).then(res => {
                            if (res.data.code == '0') {
                                this.$message({
                                    message: res.data.msg,
                                    duration: 2000,
                                    showClose: true,
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    location.reload();
                                }, 1000)
                            }
                            else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                }
                else {
                    return false;
                }
            })
        },
        deleteThisMenu(businessId) {
            this.$confirm('此操作将删除此菜单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBusinessMenu(businessId).then(res => {
                    if (res.data.code == '0') {
                        this.$message({
                            message: res.data.msg,
                            duration: 2000,
                            showClose: true,
                            type: 'success'
                        });
                        setTimeout(() => {
                            location.reload();
                        }, 1000)
                    }
                    else {
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    },
    mounted() {
        getBusinessMenu().then(res => {
            this.BusinessMenuData = res.data.data;
            console.log(this.BusinessMenuData)
        })
    }
}
</script>